<template>
    <div class="overall">
        <el-card class="rental_field">
            <div class="title">
                租赁订单
            </div>
             <el-table  :data="rentalOrderList"  border stripe>
                 <el-table-column label="订单编号" prop="strId"  ></el-table-column>
                 <el-table-column label="商品名称" prop="rentalGoods.name"  ></el-table-column>
                 <el-table-column label="订单总价" prop="orderCost" width="80px">
                     <template v-slot="scope">
                         <div class="price_tag">
                        ￥{{scope.row.orderCost}}
                        </div>
                     </template>
                 </el-table-column>
                 <el-table-column label="租期(天)" prop="" width="80px">
                     <template v-slot="scope">
                        {{scope.row.periodNumber*scope.row.rentalGoods.leasePeriodDays}}
                     </template>
                 </el-table-column>
                 <el-table-column label="收货状态" prop="" width="80px">
                     <template v-slot="scope">
                        <div v-if="scope.row.isReceipt">已收货</div>
                        <div v-else>未收货</div>
                     </template>
                 </el-table-column>
                 <el-table-column label="租赁状态" prop="" width="80px">
                     <template v-slot="scope">
                        <div v-if="scope.row.isReturn">已归还</div>
                        <div v-else>未归还</div>
                     </template>
                 </el-table-column>
                 <el-table-column label="下单时间" prop="receiptTime">
                     <template v-slot="scope">
                        {{scope.row.date | dateFormat}}
                     </template>
                 </el-table-column>
                 <el-table-column label="操作"  width="350px">
                     <template v-slot="scope">
                         <button  class="detail_btn" @click="showRBox(scope.row.strId)">详情</button>
                         <button  class="progress_btn" @click="showProgress(scope.row.logistics)">物流</button>
                         <button  class="receipt_btn" @click="setReturn(scope.row.strId)" v-if="!scope.row.isReceipt">收货</button>
                         <button  class="receipt_btn_no" v-else>收货</button>
                         <button  class="comment_btn" @click="setRentalRating(scope.row.rentalGoods.strId)" v-if="scope.row.isReceipt">评价</button>
                         <button  class="comment_btn_no"  v-else>评价</button>
                     </template>
                 </el-table-column>
             </el-table>
        </el-card>


        <el-card class="share_field">
            <div class="title">
                共享订单
            </div>
            <!-- 订单列表数据 -->
             <el-table  :data="shareOrderList"  border stripe>
                 <el-table-column label="订单编号" prop="strId"  ></el-table-column>
                 <el-table-column label="商品名称" prop="shareGoods.name"  ></el-table-column>
                 <el-table-column label="订单总价" prop="orderCost" width="80px" >
                     <template v-slot="scope">
                         <div class="price_tag">
                        ￥{{scope.row.orderCost}}
                        </div>
                     </template>
                 </el-table-column>
                 <el-table-column label="下单时间" prop="date">
                     <template v-slot="scope">
                        {{scope.row.date | dateFormat}}
                     </template>
                 </el-table-column>
                 <el-table-column label="开始时间" prop="startDate">
                     <template v-slot="scope">
                        {{scope.row.startDate | dateFormat}}
                     </template>
                 </el-table-column>
                 <el-table-column label="结束时间" prop="endDate">
                     <template v-slot="scope">
                        {{scope.row.endDate | dateFormat}}
                     </template>
                 </el-table-column>
                 <el-table-column label="操作"  width="250px">
                     <template v-slot="scope">
                         <button  class="detail_btn" @click="showSBox(scope.row.strId)">详情</button>
                         <button  class="progress_btn" @click="showLocation(scope.row.shareGoods.addressX,scope.row.shareGoods.addressY)">位置</button>
                         <button  class="comment_btn" @click="setShareRating(scope.row.shareGoods.strId)">评价</button>
                     </template>
                 </el-table-column>
             </el-table>
        </el-card>


         <!-- 展示进度的对话框 -->
        <el-dialog title="详细信息" :visible.sync="rentalDialogVisible" width="50%" :close-on-click-modal="false" >
            <!-- 内容主体区 -->
            <el-collapse v-model="activeRDetails" >
                <el-collapse-item title="订单详情" name="1">
                   <div class="collapse_text"><h3>订单号:</h3><p>{{rentalDetail.strId}}</p></div> 
                   <div class="collapse_text"><h3>订单总价:</h3><p>{{rentalDetail.orderCost}}</p></div> 
                   <div class="collapse_text"><h3>租赁天数:</h3><p>{{rentalDetail.periodNumber*rentalDetailGood.leasePeriodDays}}</p></div> 
                   <div class="collapse_text"><h3>下单时间:</h3><p>{{rentalDetail.date | dateFormat}}</p></div> 
                   <div class="collapse_text"><h3>收货时间:</h3><p>{{rentalDetail.receiptTime | dateFormat}}</p></div> 
                   <div class="collapse_text"><h3>归还时间:</h3><p>{{rentalDetail.returnTime | dateFormat}}</p></div> 
                </el-collapse-item>
                <el-collapse-item title="商品信息" name="2">
                    <div class="collapse_text"><h3>商品名:</h3><p>{{rentalDetailGood.name}}</p></div> 
                    <div class="collapse_text"><h3>商品库存:</h3><p>{{rentalDetailGood.inventory}}</p></div> 
                    <div class="collapse_text"><h3>商品总价:</h3><p>{{rentalDetailGood.totalPrice}}</p></div> 
                    <div class="collapse_text"><h3>租赁设置:</h3><p>{{rentalDetailGood.leasePeriodDays}}天</p></div> 
                </el-collapse-item>
                <el-collapse-item title="买家信息" name="3">
                    <div class="collapse_text"><h3>收货人:</h3><p>{{rentalDetailRecipient.name}}</p></div> 
                    <div class="collapse_text"><h3>收货地址:</h3><p>{{rentalDetailRecipient.address}}</p></div> 
                    <div class="collapse_text"><h3>联系方式</h3><p>{{rentalDetailRecipient.telephone}}</p></div> 
                </el-collapse-item>
            </el-collapse>    
        </el-dialog>

         <!-- 展示进度的对话框 -->
        <el-dialog title="物流进度" :visible.sync="progressDialogVisible" width="50%" :close-on-click-modal="false" >
            <!-- 内容主体区 -->
           <el-timeline >
                <el-timeline-item v-for="(activity, index) in progressInfo" :key="index" :timestamp="activity.date | dateFormat">
                {{activity.des}}
                </el-timeline-item>
            </el-timeline>
        </el-dialog>

         <!-- 对话框 -->
        <el-dialog title="详细信息" :visible.sync="shareDialogVisible" width="50%" :close-on-click-modal="false" >
            <!-- 内容主体区 -->
            <el-collapse v-model="activeRDetails" >
                <el-collapse-item title="订单详情" name="1">
                   <div class="collapse_text"><h3>订单号:</h3><p>{{shareDetail.strId}}</p></div> 
                   <div class="collapse_text"><h3>订单总价:</h3><p>{{shareDetail.orderCost}}</p></div> 
                   <div class="collapse_text"><h3>下单时间:</h3><p>{{shareDetail.date | dateFormat}}</p></div> 
                   <div class="collapse_text"><h3>起始时间:</h3><p>{{shareDetail.startDate | dateFormat}}</p></div> 
                   <div class="collapse_text"><h3>结束时间:</h3><p>{{shareDetail.endDate | dateFormat}}</p></div> 
                </el-collapse-item>
                <el-collapse-item title="商品信息" name="2">
                    <div class="collapse_text"><h3>商品名:</h3><p>{{shareDetailGood.name}}</p></div>  
                    <div class="collapse_text"><h3>租赁设置:</h3><p>￥{{shareDetailGood.moneyPerHour}}/时</p></div> 
                </el-collapse-item>
                <el-collapse-item title="使用者信息" name="3">
                    <div class="collapse_text"><h3>使用者:</h3><p>{{shareDetailRecipient.name}}</p></div> 
                    <div class="collapse_text"><h3>联系方式</h3><p>{{shareDetailRecipient.telephone}}</p></div> 
                </el-collapse-item>
            </el-collapse>    
        </el-dialog>


        <el-dialog :visible.sync="locationShow" destroy-on-close>
             <div id="location" ></div>
        </el-dialog>

        <el-dialog :visible.sync="RrateDialogVisible" destrop-on-close width="30%" title="评分">
            <el-rate v-model="rentalRating"></el-rate>

            <span slot="footer" class="dialog-footer">
                <el-button  @click="RrateDialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="uploadRentalRating">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog :visible.sync="SrateDialogVisible" destrop-on-close width="30%" title="评分">
            <el-rate v-model="shareRating"></el-rate>

            <span slot="footer" class="dialog-footer">
                <el-button  @click="SrateDialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="uploadShareRating">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data()
    {
        return{
            activeName:"first",
            activeRDetails:['1'],
            queryInfo:{
                pagenum:1,
                pagesize:10
            },
            rentalRateForm:{
                rentalGoodsId:'',
                userId:1,
                score:0,
            },
            shareRateForm:{
                shareGoodsId:'',
                userId:1,
                score:0,
            },
            rentalDetail:{},
            rentalDetailGood:{},
            rentalDetailRecipient:{},
            rentalOrderList:[],
            rentalDialogVisible:false,
            progressDialogVisible:false,
            progressInfo:[],
            shareOrderList:[],
            shareDetail:{},
            shareDetailGood:{},
            shareDetailRecipient:{},
            shareDialogVisible:false,
            locationShow:false,
            RrateDialogVisible:false,
            SrateDialogVisible:false,
            rentalRating:0,
            shareRating:0

        }
    },
    created(){
        this.getRentalOrderList();
        this.getShareOrderList();
    },
    methods:{
        async getRentalOrderList(){
           const {data:res}=await this.$http.get('rent/RentalOrder/findByUserID/1/'+this.queryInfo.pagesize+'/'+this.queryInfo.pagenum);
           if(res.code!=200)
            return this.$message.error("获取订单列表失败!");     
            console.log(res);
           this.rentalOrderList=res.data.data;
        },
        async getShareOrderList(){
            const {data:res}=await this.$http.get('rent/shareOrder/findByUserID/1/'+this.queryInfo.pagesize+'/'+this.queryInfo.pagenum);
           if(res.code!=200)
            return this.$message.error("获取订单列表失败!");
          console.log(res);
           this.shareOrderList=res.data.data;
        },
       // 监听页码size改变
        handleRentalSizeChange(newSize){
            this.queryInfo.pagesize=newSize;
            this.getRentalOrderList();
        },
        // 监听页码值改变
        handleRentalCurrentChange(newPage){
            this.queryInfo.pagenum=newPage;
           this.getRentalOrderList();
        },
        // 监听页码size改变
        handleShareSizeChange(newSize){
            this.queryInfo.pagesize=newSize;
            this.getShareOrderList();
        },
        // 监听页码值改变
        handleShareCurrentChange(newPage){
            this.queryInfo.pagenum=newPage;
           this.getShareOrderList();
        },
        async showRBox(id){
            this.rentalDialogVisible=true;
            const {data:res}=await this.$http.get('rent/RentalOrder/findByID/'+id);
            console.log(res.data)
            this.rentalDetail=res.data;
            this.rentalDetailGood=res.data.rentalGoods;
            this.rentalDetailRecipient=res.data.recipient;
        },
        async showSBox(id){
            this.shareDialogVisible=true;
            const {data:res}=await this.$http.get('rent/shareOrder/findByID/'+id);
            console.log(res.data)
            this.shareDetail=res.data;
            this.shareDetailGood=res.data.shareGoods;
            this.shareDetailRecipient=res.data.recipient;
        },
        setRentalRating(id)
        {
            this.rentalRateForm.rentalGoodsId=id;
            this.RrateDialogVisible=true;
        },
        setShareRating(id)
        {
            this.shareRateForm.shareGoodsId=id;
            this.SrateDialogVisible=true;
        },
        async uploadRentalRating()
        {
            this.rentalRateForm.score=this.rentalRating;
            const {data:res}=this.$http.post('rent/rentalScore/add',this.rentalRateForm)
            this.$message.success("评价成功!");
            this.RrateDialogVisible=false;
        },
        async uploadShareRating(){
            this.shareRateForm.score=this.shareRating;
            const {data:res}=this.$http.post('rent/shareScore/add',this.shareRateForm)
            this.$message.success("评价成功!");
            console.log(res)
            console.log(this.shareRateForm);
            this.SrateDialogVisible=false;
        },
        setReturn(id)
        {
            this.$confirm('是否确认收货', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(async () => {
            const{data:res}=await this.$http.get('rent/RentalOrder/setReciept/'+id)
            console.log(res)
            if(res.code==200)
            {
            this.$message({
            type: 'success',
            message: '设置成功!'
          });
            }
        }).catch(() => {
    
        });
        },
        showProgress(logistics){
            this.progressDialogVisible=true;
            this.progressInfo=logistics;
        },
        showLocation(x,y)
        {

        this.locationShow=!this.locationShow;
        var that=this;
        this.$nextTick(()=>{
        
            var position = document.getElementById("location");

            var center = new TMap.LatLng(x, y);//设置中心点坐标
            //初始化地图
            var map = new TMap.Map("location", {
                center: center
            });
            
            var marker = new TMap.MultiMarker({
            id: "marker-layer", //图层id
            map: map,
            styles: { //点标注的相关样式
                "marker": new TMap.MarkerStyle({
                    "width": 25,
                    "height": 35,
                    "anchor": { x: 16, y: 32 },
                    "src": "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png"
                })
            },
            geometries: [{ //点标注数据数组
                "id": "demo",
                "styleId": "marker",
                "position": new TMap.LatLng(x, y),
                "properties": {
                    "title": "marker"
                }
            }]
            
        });

        
        })
      }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-card__body
{
    padding:0;
}
.rental_field,.share_field
{
    width:1200px;
    margin-bottom: 30px;
    margin-left:auto;
    margin-right: auto;;
    overflow: hidden;
    background: #fff;
    padding:0;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    border-color: rgba(0,0,0,.14);
    box-shadow: 0 3px 8px -6px rgb(0 0 0 / 10%);
    .title
    {
    padding-left: 30px;
    position: relative;
    z-index: 10;
    height: 60px;
    padding: 0 10px 0 24px;
    border-bottom: 1px solid #d4d4d4;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 1px 7px rgb(0 0 0 / 6%);
    background: #f3f3f3;
    background: linear-gradient(#fbfbfb,#ececec);
    line-height: 60px;
    font-size: 18px;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    }
}
 .detail_btn,.progress_btn,.receipt_btn,.comment_btn,.receipt_btn_no,.comment_btn_no
{
    width:60px;
    height:30px;
    margin-right: 10px;
    float: left;
    border-radius: 10px;
    border:none;
    cursor: pointer;
    transition: .5s;
    color: #fff;
    font-weight: 600;
    &:hover{
        transform: scale(1.1);
    }
 }
 .detail_btn
 {
     background-image: linear-gradient(to top, #7028e4 0%, #e5b2ca 100%);
 }
 .progress_btn
 {
     background-image: linear-gradient(to top, #9be15d 0%, #00e3ae 100%);
 }
 .receipt_btn
 {
     background-image: linear-gradient(to right, #e65c00 , #f9d423 );
 }
 .comment_btn
 {
     background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
 }
 .receipt_btn_no,.comment_btn_no
 {
     background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
     cursor: not-allowed;
     &:hover{
         transform: scale(1);
     }
 }
.el-collapse-item
{
    div
    {
        display: flex;
        p{
        line-height: 30px;
        margin-left: 8px;
        }
    }
}
</style>